.comment-wrap {
    display: flex;
    padding-top: 20px;

    .avatar {
      @include img-wrap(40px);
      margin-right: 12px;

      img {
        border-radius: 50%;
      }
    }

    .content {
      padding-bottom: 20px;
      width: 100%;
      font-size: $font-size-sm;

      &.border {
        border-bottom: 1px solid var(--border);
      }

      .replied {
        padding: 8px;
        margin-top: 8px;
        background: var(--song-shallow-grey-bg);
        border-radius: 4px;
      }

      .comment-text {
        .username {
          display: inline-block;
          margin-right: 4px;
          color: $blue;
        }

        .text {
          line-height: 1.5;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;

        .date {
          color: var(--font-color-grey-shallow);
        }

        .actions {
          color: var(--font-color-grey-shallow);
        }
      }
    }
  }
